1. September 2025Deutsch

Entfesseln Sie das volle Potenzial Ihrer Progressive Web App (PWA), indem Sie die Anzeigemodi des Manifests meistern. Dieser umfassende Leitfaden untersucht verschiedene Anzeigeoptionen und deren Auswirkungen auf die Benutzererfahrung auf diversen Plattformen.

Frontend PWA Manifest Display: Erweiterte Konfiguration des Anzeigemodus

Progressive Web Apps (PWAs) revolutionieren die Art und Weise, wie Benutzer mit Webinhalten interagieren. Durch die Nutzung moderner Web-Technologien bieten PWAs App-ähnliche Erlebnisse direkt über den Browser und schließen so die Lücke zwischen traditionellen Websites und nativen Anwendungen. Das Herzstück einer PWA ist das Web-App-Manifest, eine JSON-Datei, die entscheidende Informationen über die Anwendung bereitstellt, einschließlich ihres Namens, ihrer Symbole und, was am wichtigsten ist, ihres Anzeigemodus. Dieser Artikel taucht tief in die erweiterte Konfiguration der Anzeigemodus-Eigenschaft innerhalb des PWA-Manifests ein und untersucht die verschiedenen Optionen und deren Auswirkungen auf die Benutzererfahrung.

Das Web-App-Manifest verstehen

Bevor wir uns mit den Feinheiten der Anzeigemodi befassen, wollen wir kurz die Rolle des Web-App-Manifests zusammenfassen. Die Manifest-Datei, typischerweise manifest.json oder manifest.webmanifest genannt, ist eine einfache JSON-Datei, die Metadaten über Ihre PWA enthält. Diese Metadaten werden vom Browser verwendet, um zu bestimmen, wie die App installiert und angezeigt werden soll. Zu den wichtigsten Eigenschaften im Manifest gehören:

name: Der Name Ihrer PWA, wie er dem Benutzer angezeigt wird.
short_name: Eine kürzere Version des Namens, die bei begrenztem Platz verwendet wird.
icons: Ein Array von Symbolen verschiedener Größen und Formate, die für das Startbildschirm-Symbol der App, den Begrüßungsbildschirm und andere UI-Elemente verwendet werden.
start_url: Die URL, die geladen wird, wenn die PWA gestartet wird.
display: Dies ist der Schwerpunkt unseres Artikels – der Anzeigemodus bestimmt, wie die PWA dem Benutzer angezeigt wird.
background_color: Die Hintergrundfarbe, die für den Begrüßungsbildschirm verwendet wird.
theme_color: Die Themenfarbe, die vom Browser für die Titelleiste und andere UI-Elemente verwendet wird.
description: Eine kurze Beschreibung der PWA.
screenshots: Ein Array von Screenshots, die im App-Installationsbanner angezeigt werden.
categories: Ein Array von Kategorien, zu denen die PWA gehört (z. B. "Bücher", "Einkaufen", "Produktivität").
prefer_related_applications: Ein boolescher Wert, der angibt, ob die plattformspezifische App gegenüber der Web-App bevorzugt werden soll.
related_applications: Ein Array von plattformspezifischen Anwendungen, die als Alternativen für die Installation betrachtet werden.

Die Manifest-Datei wird mit einem <link>-Tag im <head>-Bereich Ihrer HTML-Datei mit Ihrer PWA verknüpft:

<link rel="manifest" href="manifest.json">

Die Optionen des Anzeigemodus erkunden

Die display-Eigenschaft im Manifest bietet vier verschiedene Anzeigemodi, die jeweils beeinflussen, wie die PWA dem Benutzer präsentiert wird:

fullscreen: Die PWA nimmt den gesamten Bildschirm ein und blendet die UI-Elemente des Browsers wie die Adressleiste und die Navigationsschaltflächen aus.
standalone: Die PWA wird in einem eigenen Fenster ausgeführt, getrennt vom Browser, mit einer Titelleiste und ohne Browser-UI-Elemente. Dies ist der häufigste und oft gewünschte Anzeigemodus für eine PWA.
minimal-ui: Ähnlich wie standalone, enthält aber minimale Browser-UI-Elemente, wie z. B. Zurück- und Vorwärts-Schaltflächen sowie eine Aktualisierungsschaltfläche.
browser: Die PWA öffnet sich in einem Standard-Browser-Tab oder -Fenster und zeigt die vollständige Browser-Benutzeroberfläche an.

Betrachten wir jeden dieser Modi im Detail.

1. Der fullscreen-Modus

Der fullscreen-Modus bietet das eindringlichste Erlebnis und maximiert die Bildschirmfläche für Ihre PWA. Dies ist ideal für Spiele, Videoplayer oder Anwendungen, bei denen eine ablenkungsfreie Umgebung entscheidend ist.

Um den fullscreen-Modus zu konfigurieren, setzen Sie einfach die display-Eigenschaft in Ihrem Manifest auf "fullscreen":

{
  "name": "Meine Fullscreen PWA",
  "display": "fullscreen",
  "start_url": "/",
  "icons": [
    {
      "src": "icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

Überlegungen zum fullscreen-Modus:

Benutzererfahrung: Stellen Sie sicher, dass Ihre PWA eine klare und intuitive Navigation in der Vollbildumgebung bietet. Benutzer müssen in der Lage sein, den Modus einfach zu verlassen oder zu vorherigen Bildschirmen zurückzukehren.
Barrierefreiheit: Berücksichtigen Sie Benutzer mit Behinderungen, die auf Browser-UI-Elemente zur Navigation angewiesen sein könnten. Stellen Sie alternative Navigationsmethoden in Ihrer PWA bereit.
Plattformunterstützung: Obwohl der Vollbildmodus weitgehend unterstützt wird, kann sein Verhalten je nach Browser und Betriebssystem leicht variieren. Gründliches Testen ist unerlässlich.
Inhaltsskalierung: Stellen Sie sicher, dass Ihre Inhalte im Vollbildmodus richtig skaliert werden, um auf verschiedene Bildschirmgrößen und Seitenverhältnisse zu passen.

Beispiel: Eine Spieleanwendung oder ein dedizierter Video-Streaming-Dienst würde stark vom immersiven fullscreen-Modus profitieren, da sich die Benutzer ohne Ablenkungen auf den Inhalt konzentrieren können.

2. Der standalone-Modus

Der standalone-Modus bietet einen ausgewogenen Ansatz, der ein App-ähnliches Erlebnis bietet, ohne die Benutzeroberfläche des Browsers vollständig auszublenden. Die PWA wird in einem eigenen Top-Level-Fenster ausgeführt, getrennt vom Browser, und hat ihr eigenes App-Symbol im App-Launcher des Betriebssystems. Dies ist oft der bevorzugte Modus für die meisten PWAs.

Um den standalone-Modus zu konfigurieren, setzen Sie die display-Eigenschaft auf "standalone":

{
  "name": "Meine Standalone PWA",
  "display": "standalone",
  "start_url": "/",
  "icons": [
    {
      "src": "icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

Vorteile des standalone-Modus:

App-ähnliches Erlebnis: Bietet ein visuell unterscheidbares Erlebnis von einer normalen Website, was das Engagement der Benutzer erhöht.
Startbildschirm-Integration: Ermöglicht es Benutzern, die PWA auf ihrem Startbildschirm zu installieren, wodurch sie leicht zugänglich wird.
Offline-Fähigkeiten: PWAs im standalone-Modus können Service Worker nutzen, um Offline-Funktionalität bereitzustellen und die Zuverlässigkeit zu erhöhen.

Beispiel: Eine E-Commerce-Anwendung oder ein Social-Media-Client würde im standalone-Modus gut funktionieren und den Benutzern ein nahtloses Erlebnis bieten, das dem von nativen Apps ähnelt.

3. Der minimal-ui-Modus

Der minimal-ui-Modus ähnelt dem standalone-Modus, enthält aber einen minimalen Satz von Browser-UI-Elementen, typischerweise Zurück- und Vorwärts-Schaltflächen sowie eine Aktualisierungsschaltfläche. Dieser Modus bietet ein etwas weniger immersives Erlebnis als standalone, kann aber für PWAs nützlich sein, die auf die Browser-Navigation angewiesen sind.

Um den minimal-ui-Modus zu konfigurieren, setzen Sie die display-Eigenschaft auf "minimal-ui":

{
  "name": "Meine Minimal-UI PWA",
  "display": "minimal-ui",
  "start_url": "/",
  "icons": [
    {
      "src": "icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

Anwendungsfälle für den minimal-ui-Modus:

Abhängigkeit von der Browser-Navigation: Wenn Ihre PWA stark auf die Zurück- und Vorwärts-Schaltflächen des Browsers angewiesen ist, kann minimal-ui den Benutzern ein vertrauteres Erlebnis bieten.
Integration von älteren Web-Apps: Wenn Sie eine ältere Webanwendung zu einer PWA migrieren, kann minimal-ui den Übergang durch die Bereitstellung vertrauter Browser-Steuerelemente erleichtern.

Beispiel: Eine Textverarbeitungsanwendung oder ein komplexes Webformular könnte vom minimal-ui-Modus profitieren, da Benutzer mit den Zurück- und Vorwärts-Schaltflächen des Browsers einfach zwischen verschiedenen Abschnitten navigieren können.

4. Der browser-Modus

Der browser-Modus ist der Standard-Anzeigemodus, wenn die display-Eigenschaft im Manifest nicht angegeben ist. In diesem Modus öffnet sich die PWA in einem Standard-Browser-Tab oder -Fenster und zeigt die vollständige Browser-Benutzeroberfläche an, einschließlich Adressleiste, Navigationsschaltflächen und Lesezeichen. Dieser Modus entspricht im Wesentlichen einer normalen Website.

Um den browser-Modus explizit zu konfigurieren, setzen Sie die display-Eigenschaft auf "browser":

{
  "name": "Meine Browser PWA",
  "display": "browser",
  "start_url": "/",
  "icons": [
    {
      "src": "icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

Wann man den browser-Modus verwenden sollte:

Einfache Webanwendungen: Für einfache Webanwendungen, die kein App-ähnliches Erlebnis erfordern, kann der browser-Modus ausreichend sein.
Progressive Enhancement: Sie können den browser-Modus als Fallback für ältere Browser verwenden, die PWA-Funktionen nicht vollständig unterstützen.

Beispiel: Ein einfacher Blog oder eine statische Website könnte den browser-Modus verwenden, da er keine speziellen App-ähnlichen Funktionen erfordert.

Einen Fallback-Anzeigemodus festlegen

Es ist wichtig zu berücksichtigen, dass nicht alle Browser alle Anzeigemodi vollständig unterstützen. Um ein konsistentes Erlebnis auf verschiedenen Plattformen zu gewährleisten, können Sie einen Fallback-Anzeigemodus mit der Eigenschaft display_override im Manifest festlegen.

Die display_override-Eigenschaft ist ein Array von Anzeigemodi, geordnet nach Präferenz. Der Browser wird versuchen, den ersten Anzeigemodus im Array zu verwenden, den er unterstützt. Wenn keiner der angegebenen Modi unterstützt wird, greift der Browser auf seinen Standard-Anzeigemodus zurück (normalerweise browser).

Um beispielsweise den standalone-Modus zu bevorzugen, aber auf minimal-ui und dann auf browser zurückzugreifen, würden Sie das Manifest wie folgt konfigurieren:

{
  "name": "Meine PWA mit Fallback",
  "display": "standalone",
  "display_override": ["standalone", "minimal-ui", "browser"],
  "start_url": "/",
  "icons": [
    {
      "src": "icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

Über grundlegende Anzeigemodi hinaus: Umgang mit Grenzfällen und Plattformunterschieden

Obwohl die Kern-Anzeigemodi ein hohes Maß an Kontrolle bieten, ist das Verständnis ihrer Interaktion mit verschiedenen Plattformen und Grenzfällen von größter Bedeutung, um robuste und konsistente Benutzererfahrungen zu schaffen. Hier sind einige weiterführende Überlegungen:

1. Plattformspezifische Manifeste

In bestimmten Szenarien benötigen Sie möglicherweise leicht unterschiedliche Konfigurationen je nach Betriebssystem (OS) des Benutzers. Beispielsweise könnten Sie eine andere Symbolgröße für iOS im Vergleich zu Android wünschen. Obwohl oft ein einziges Manifest ausreicht, kann für stark angepasste Erlebnisse das bedingte Laden von Manifesten eingesetzt werden.

Dies kann mithilfe serverseitiger Logik oder JavaScript erreicht werden, um das Betriebssystem des Benutzers zu erkennen und die entsprechende Manifest-Datei bereitzustellen. Seien Sie sich der erhöhten Komplexität bewusst, die dieser Ansatz mit sich bringt.

2. Umgang mit der Bildschirmausrichtung

PWAs haben die Möglichkeit, ihre bevorzugte Bildschirmausrichtung mithilfe der orientation-Eigenschaft im Manifest zu definieren. Beispielsweise kann das Sperren einer Anwendung im Querformat das Spiel- oder Medienkonsumerlebnis verbessern.

Denken Sie jedoch daran, dass die Benutzer letztendlich die Kontrolle über die Ausrichtung ihres Geräts haben. Gestalten Sie Ihre PWA so, dass sie Änderungen der Ausrichtung elegant handhabt und sicherstellt, dass der Inhalt unabhängig von der Position des Geräts lesbar und funktionsfähig bleibt.

3. Anpassung des Begrüßungsbildschirms

Der Begrüßungsbildschirm (Splash Screen), der kurz während des Ladens der PWA angezeigt wird, bietet die Möglichkeit, einen positiven ersten Eindruck zu hinterlassen. Passen Sie die Hintergrundfarbe (background_color) und die Themenfarbe (theme_color) des Begrüßungsbildschirms an Ihre Markenidentität an.

Stellen Sie sicher, dass die gewählten Farben einen ausreichenden Kontrast zum App-Symbol bieten, um die Sichtbarkeit und Lesbarkeit zu maximieren. Erwägen Sie Tests auf verschiedenen Geräten, um zu überprüfen, ob der Begrüßungsbildschirm korrekt dargestellt wird.

4. Sicherheitsüberlegungen

PWAs sollten, wie herkömmliche Websites auch, immer über HTTPS ausgeliefert werden. Dies sichert die Verbindung zwischen dem Browser des Benutzers und dem Server und schützt sensible Daten vor dem Abhören. Darüber hinaus ist die Verwendung eines sicheren Kontexts eine Voraussetzung für die Aktivierung von Service Workern, einer Kerntechnologie, die der PWA-Funktionalität zugrunde liegt.

Überprüfen Sie, ob das SSL/TLS-Zertifikat Ihres Servers gültig und ordnungsgemäß konfiguriert ist. Aktualisieren Sie regelmäßig Ihre Sicherheitsprotokolle, um potenzielle Schwachstellen zu minimieren.

5. Testen auf verschiedenen Geräten und Browsern

Angesichts der Vielfalt der weltweit genutzten Geräte und Browser ist gründliches Testen entscheidend, um sicherzustellen, dass Ihre PWA auf allen Zielplattformen korrekt funktioniert. Nutzen Sie die Entwicklertools der Browser, um verschiedene Bildschirmgrößen und Netzwerkbedingungen zu simulieren.

Setzen Sie Cross-Browser-Testdienste ein, um das Testen auf einer Vielzahl von Browsern und Betriebssystemen zu automatisieren. Sammeln Sie Feedback von Benutzern auf verschiedenen Geräten, um Kompatibilitätsprobleme zu identifizieren und zu beheben.

6. Best Practices für die Barrierefreiheit

Barrierefreiheit sollte bei der Entwicklung jeder Webanwendung, einschließlich PWAs, eine zentrale Rolle spielen. Halten Sie sich an die Richtlinien für barrierefreie Webinhalte (WCAG), um sicherzustellen, dass Ihre PWA von Menschen mit Behinderungen genutzt werden kann. Stellen Sie Alternativtexte für Bilder bereit, verwenden Sie semantische HTML-Elemente und sorgen Sie für ausreichenden Farbkontrast.

Testen Sie Ihre PWA mit assistiven Technologien wie Screenreadern, um Barrieren zu identifizieren und zu beheben. Stellen Sie im Vollbildmodus sicher, dass alternative Navigationsmethoden bereitgestellt werden.

Praktische Beispiele aus aller Welt

Lassen Sie uns einige Praxisbeispiele untersuchen, wie verschiedene Unternehmen die PWA-Anzeigemodi nutzen, um die Benutzererfahrung zu verbessern:

Starbucks (Global): Die Starbucks PWA nutzt den standalone-Modus, um ein optimiertes Bestellerlebnis zu bieten, das ihrer nativen mobilen App ähnelt. Dies ermöglicht es Benutzern weltweit, schnell Bestellungen aufzugeben und ihre Treuepunkte zu verfolgen.
Twitter Lite (Global): Twitter Lite, entwickelt für Benutzer in datensensiblen Regionen, verwendet den standalone-Modus, um ein effizientes und leichtgewichtiges Social-Media-Erlebnis zu bieten. Dies ermöglicht es Benutzern in Gebieten mit begrenzter Bandbreite, in Verbindung zu bleiben.
Flipkart Lite (Indien): Flipkart Lite, eine E-Commerce-PWA, nutzt den standalone-Modus, um ein Mobile-First-Einkaufserlebnis für Benutzer in Indien zu bieten. Dies ermöglicht es Benutzern mit älteren Geräten und langsameren Internetverbindungen, einfach Produkte zu durchsuchen und zu kaufen.
AliExpress (China, Global): Die PWA von AliExpress ist auf verschiedenen Plattformen verfügbar und nutzt Service Worker, um weltweit ein schnelleres Erlebnis zu bieten.

Handlungsorientierte Einblicke und Best Practices

Um die PWA-Manifest-Anzeigemodi effektiv zu nutzen, beachten Sie die folgenden handlungsorientierten Einblicke und Best Practices:

Priorisieren Sie die Benutzererfahrung: Wählen Sie den Anzeigemodus, der am besten zum Zweck und zur Zielgruppe Ihrer PWA passt.
Sorgen Sie für klare Navigation: Stellen Sie eine intuitive Navigation innerhalb Ihrer PWA sicher, insbesondere im fullscreen-Modus.
Testen Sie gründlich: Testen Sie Ihre PWA auf verschiedenen Browsern, Geräten und Betriebssystemen.
Implementieren Sie Fallback-Mechanismen: Verwenden Sie display_override, um ein konsistentes Erlebnis auf allen Plattformen zu gewährleisten.
Optimieren Sie die Leistung: Minimieren Sie die Ladezeiten und optimieren Sie Ihre PWA für die Offline-Nutzung.
Berücksichtigen Sie App-Installationsbanner: Fordern Sie Benutzer über App-Installationsbanner auf, Ihre PWA auf ihrem Startbildschirm zu installieren. Konfigurieren Sie Ihr Manifest korrekt, damit dies ausgelöst wird.
Aktualisieren Sie Ihr Manifest regelmäßig: Halten Sie Ihre Manifest-Datei mit den neuesten Spezifikationen und Best Practices auf dem neuesten Stand.
Analysieren Sie das Benutzerverhalten: Verfolgen Sie, wie Benutzer mit Ihrer PWA in verschiedenen Anzeigemodi interagieren, um Verbesserungspotenziale zu identifizieren.

Fazit

Die Beherrschung der Konfiguration von PWA-Manifest-Anzeigemodi ist entscheidend für die Bereitstellung außergewöhnlicher Benutzererfahrungen. Indem Sie die Nuancen jeder Anzeigeoption verstehen und plattformspezifische Anforderungen berücksichtigen, können Sie Ihre PWA für unterschiedliche Benutzerbedürfnisse optimieren und ein wirklich ansprechendes und App-ähnliches Erlebnis schaffen. Denken Sie daran, die Benutzererfahrung zu priorisieren, auf verschiedenen Plattformen gründlich zu testen und Ihre PWA kontinuierlich auf der Grundlage von Benutzerfeedback und sich entwickelnden Webstandards zu verfeinern. Indem Sie diese Best Practices befolgen, können Sie das volle Potenzial von PWAs ausschöpfen und Ihrem globalen Publikum ein überlegenes Web-Erlebnis bieten.